<template>
  <div class="wrapper">
    <el-button icon="el-icon-plus" circle @click="handleCreated()" />
    <!-- <typeItem :node="dataList" @emitClick="bindClick" /> -->
    <el-table
      :data="dataList"
      row-key="id"
      border
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >

      <el-table-column
        type="selection"
        align="center"
        width="55"
      />
      <el-table-column label="title" width="200">
        <template slot-scope="scope">
          <el-link type="primary" @click="handleActive(scope.row,'info')">
            {{ scope.row.title }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="id" align="center">
        <template slot-scope="{row}">
          {{ row.id }}
        </template>
      </el-table-column>
      <el-table-column label="parentId" align="center">
        <template slot-scope="{row}">
          {{ row.parentId }}
        </template>
      </el-table-column>
      <el-table-column label="value" align="center">
        <template slot-scope="{row}">
          {{ row.value }}
        </template>
      </el-table-column>

      <el-table-column label="Actions" align="center" width="230">
        <template slot-scope="{row}">
          <el-button type="primary" @click="handleActive(row,'addChildren')">新增子类</el-button>
          <el-button type="danger" @click="handleActive(row,'removeItem')">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialog.title[dialog.active]" :visible.sync="dialog.dialogVisible" destroy-on-close>
      <DictCreate :emit-data="currentItem" @handleBoxEvent="handleDialog" />
    </el-dialog>
  </div>
</template>

<script>
import {
  dictTypeTree, removeDictType, createDictType,
  updateDictType, getDictType
} from '@/api/dictionaries'
import DictCreate from './widget/CreateType'
import { mapState } from 'vuex'
export default {
  components: {
    DictCreate
  },
  props: {},
  data() {
    const dialog = {
      dialogVisible: false,
      active: '',
      title: { created: '新建类型', info: '字典详情' }
    }
    return {
      parentId: -1,
      list: [],
      dialog,
      currentItem: {}
    }
  },
  computed: {
    dataList() {
      const data = this.list
      const result = data
      return result
    },
    ...mapState('user', { tenantCode: (state) => state.tenantCode })
  },
  watch: {},
  created() {
    this.getList()
  },
  mounted() {},
  methods: {
    getList() {
      dictTypeTree().then(
        res => {
          const { code, data } = res
          if (code === 200) {
            this.list = data
          }
          console.log('获取所有的字典', res)
        }
      )
    },
    handleActive(target, type) {
      const { id } = target

      if (type === 'info') {
        getDictType(id).then(res => {
          const { data, code } = res
          if (code === 200) {
            this.currentItem = data
            this.handleCreated('info')
          }
        })
      }
      if (type === 'addChildren') {
        console.log('创建子集 ')
        this.parentId = id
        this.handleCreated()
      }
      if (type === 'removeItem') {
        this.removeDictType(id)
      }
    },
    removeDictType(id) {
      removeDictType(id).then(res => {
        const { code, message } = res
        if (code === 200) {
          this.$message({
            message,
            type: 'success'
          })
          this.getList()
          return
        }
        this.$message.error(message)
      })
    },
    handleCreated(target = 'created') {
      this.setCurrentID()
      this.showDialog(target)
    },
    setCurrentID() {
      this.currentId = null
    },
    showDialog(target) {
      this.dialog.dialogVisible = true
      this.dialog.active = target
    },
    closeDialog() {
      this.setCurrentID()
      this.dialog.dialogVisible = false
      this.currentItem = {}
      this.parentId = -1
    },
    handleDialog(emitObj) {
      const { target } = emitObj
      const type = this.dialog.active
      if (type === 'created') {
        const parentId = this.parentId
        const tenantCode = this.tenantCode
        this.saveData({ ...target, parentId, tenantCode })
        return
      }
      if (type === 'info') {
        updateDictType({ ...this.currentItem, ...target }).then(res => {
          const { code, message } = res
          if (code === 200) {
            this.$message({
              message,
              type: 'success'
            })
            this.getList()
            return
          }
          this.$message.error(message)
        })
      }
    },
    saveData(dictObj) {
      this.closeDialog()
      if (dictObj) {
        dictObj.delEnabled = dictObj.delEnabled ? 'Y' : 'N'
        createDictType(dictObj).then(res => {
          const { code, message } = res
          if (code === 200) {
            this.$message({
              message,
              type: 'success'
            })
            this.getList()
            return
          }
          this.$message.error(message)
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
   padding: 0px;
   margin: 0px;
}
</style>
